<script setup>
import { ElDatePicker, ElInput, ElSelect } from 'element-plus'
import { computed, reactive, ref } from 'vue'

// 可用组件列表
const components = [
  { type: 'input', label: '输入框', component: ElInput },
  { type: 'select', label: '选择器', component: ElSelect },
  { type: 'date', label: '日期选择', component: ElDatePicker },
]

// 表单项数据
const formItems = reactive([])
const selectedIndex = ref(-1)

// 获取组件类型对应的组件
function getComponent(type) {
  return components.find(c => c.type === type)?.component
}

// 拖拽处理
function handleDragStart(e, comp) {
  e.dataTransfer.setData('component', JSON.stringify(comp))
}

function handleDrop(e) {
  const compData = JSON.parse(e.dataTransfer.getData('component'))
  addComponent(compData)
}

// 添加组件到画布
function addComponent(comp) {
  formItems.push({
    id: Date.now().toString(),
    type: comp.type,
    props: {
      label: `字段${formItems.length + 1}`,
      field: `field${formItems.length + 1}`,
      placeholder: '请输入',
    },
    style: {
      left: '10px',
      top: `${formItems.length * 60 + 10}px`,
    },
  })
}

// 选择组件
function selectItem(index) {
  selectedIndex.value = index
}

// 当前选中项
const selectedItem = computed(() => {
  return formItems[selectedIndex.value]
})

// 生成JSON Schema
const jsonSchema = ref('')
function generateSchema() {
  const schema = {
    type: 'object',
    properties: {},
    required: [],
  }

  formItems.forEach((item) => {
    schema.properties[item.props.field] = {
      type: 'string', // 实际应根据组件类型判断
      title: item.props.label,
    }
  })

  jsonSchema.value = JSON.stringify(schema, null, 2)
}

// 样式处理
function getItemStyle(item) {
  return {
    position: 'absolute',
    ...item.style,
  }
}
</script>

<template>
  <div class="designer-container">
    <!-- 左侧组件面板 -->
    <div class="component-panel">
      <h3>组件列表</h3>
      <div
        v-for="comp in components"
        :key="comp.type"
        class="component-item"
        draggable="true"
        @dragstart="handleDragStart($event, comp)"
      >
        {{ comp.label }}
      </div>
    </div>

    <!-- 中间画布 -->
    <div
      class="canvas"
      @drop="handleDrop"
      @dragover.prevent
    >
      <div
        v-for="(item, index) in formItems"
        :key="item.id"
        class="form-item"
        :style="getItemStyle(item)"
      >
        <component
          :is="getComponent(item.type)"
          v-bind="item.props"
          :class="{ selected: selectedIndex === index }"
          @click="selectItem(index)"
        />
      </div>
    </div>

    <!-- 右侧属性面板 -->
    <div class="property-panel">
      <h3>属性配置</h3>
      <div v-if="selectedItem">
        <div class="prop-item">
          <label>标签：</label>
          <input v-model="selectedItem.props.label">
        </div>
        <div class="prop-item">
          <label>字段名：</label>
          <input v-model="selectedItem.props.field">
        </div>
        <!-- 可根据组件类型展示更多属性 -->
      </div>
    </div>

    <!-- 显示生成的Schema -->
    <button @click="generateSchema">
      生成JSON Schema
    </button>
    <pre>{{ jsonSchema }}</pre>
  </div>
</template>

<style scoped>
.designer-container {
  display: flex;
  height: 100vh;
}

.component-panel {
  width: 200px;
  padding: 20px;
  border-right: 1px solid #ccc;
}

.component-item {
  padding: 10px;
  margin: 5px 0;
  border: 1px solid #ddd;
  cursor: move;
}

.canvas {
  flex: 1;
  position: relative;
  background: #f5f5f5;
  min-height: 500px;
}

.form-item {
  position: absolute;
  width: 200px;
  padding: 10px;
  background: white;
  border: 1px solid #ddd;
  cursor: pointer;
}

.form-item.selected {
  border: 2px solid #409eff;
}

.property-panel {
  width: 300px;
  padding: 20px;
  border-left: 1px solid #ccc;
}

.prop-item {
  margin: 10px 0;
}

pre {
  padding: 20px;
  background: #f5f5f5;
}
</style>
